<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>查看流程</title>
    <link th:replace="common/header"/>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
    <!--js逻辑-->
    <script src="/static/lib/layui/layui.js"></script>
    <script src="/static/lib/nprogress/nprogress.js"></script>
</head>
<body class="no-skin">
<div th:replace="common/top"/>
<div class="main-container ace-save-state" id="main-container">
    <div th:replace="common/menu"/>
    <div class="main-content">
        <div class="main-content-inner">
            <div th:replace="common/title"/>
            <div class="page-content">
                <div th:replace="common/skin"/>
                <div class="row">
                    <input id="instanceId" type="hidden" name="instanceId" th:value="${instanceId}">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <h3 class="header smaller lighter blue"><i class="fa fa-server" aria-hidden="true"></i>查看流程
                        </h3>
                        <div class="row-fluid">
                            <div class="text-center span12">
                                <a class="btn" shiro:hasPermission="/activiti/hisWork" href="getAll"
                                   th:href="@{/activiti/hisWork}"><i class="fa fa-reply" aria-hidden="true"></i>返回</a>
                            </div>
                        </div>
                        <div class="canvas row-fluid" id="div">
                            <div class="span12">
                                <div id="js-canvas" style="width: 100%; height: 800px;"></div>
                            </div>
                        </div>
                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div>
    </div><!-- /.main-content -->
    <div th:replace="common/footer"/>
</div><!-- /.main-container -->
<div th:replace="common/buttom"/>

<!-- required modeler styles -->
<link rel="stylesheet" href="/static/actjs/diagram-js.css">
<link rel="stylesheet" href="/static/actjs/bpmn.css">
<!-- modeler distro -->
<script src="/static/actjs/bpmn-modeler.js"></script>
<!-- jquery (required for example only) -->
<script src="/static/actjs/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        changeDivHeight();

        $(window).resize(function () {
            changeDivHeight();
        }).resize();
    });

    function changeDivHeight() {
        var div = $('#js-canvas');
        var contentContainer = $('#div'); // 获取tab标签对应的页面div容器对象 // 可能会出现获取不到的情况
        if (contentContainer.offset()) {
            offsetTop = contentContainer.offset().top;  //容器距离document顶部的距离
        }
        $.each(div, function (index, div) {
            var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            div.height = h - offsetTop - 100; // 这里 offsetTop可以替换成一个比较合理的常量值
        });
    }

    var viewer = new BpmnJS({
        container: $('#js-canvas'),
        height: 500
    });

    function log(str) {
        var console = $('#js-console');
        console.val(console.val() + str + '\n');
    }

    function openFromUrl(url) {
        log('attempting to open <' + url + '>');
        $.ajax(url, {dataType: 'text'}).done(function (xml) {
            const instanceId = $("#instanceId").val();
            viewer.importXML(xml, function (err) {
                if (err) {
                    log('error: ' + err.message);
                    console.error(err);
                } else {
                    viewer.get('canvas').zoom('fit-viewport');
                    log('success');
                }
                let overlays = viewer.get('overlays'),
                    canvas = viewer.get('canvas'),
                    elementRegistry = viewer.get('elementRegistry'),
                    modeling = viewer.get('modeling');
                $.ajax({
                    url: 'getApply_status',
                    data: {'instanceId': instanceId},
                    success: function (res) {
                        if (res !== "") {
                            const highPoint = res.highPoint;
                            const highLine = res.highLine;
                            const waitingToDo = res.waitingToDo;
                            const iDo = res.iDo;
                            //走过的线设置高亮
                            highLine.forEach(function (e) {
                                if (e != null) {
                                    const highLineEle = elementRegistry.get(e)
                                    modeling.setColor(highLineEle, {
                                        stroke: 'green',
                                    });
                                }
                            });
                            //完成的节点设置高亮
                            highPoint.forEach(function (e) {
                                const highPointEle = elementRegistry.get(e);
                                // highPoints.push(highLineEle)
                                modeling.setColor(highPointEle, {
                                    stroke: 'green',
                                    fill: 'rgba(0, 80, 0, 0.4)'
                                });
                            });
                            //当前 待办节点
                            waitingToDo.forEach(function (e) {
                                const waitingEle = elementRegistry.get(e);
                                modeling.setColor(waitingEle, {
                                    stroke: 'green',
                                    fill: 'rgba(255,255,0, 0.8)',
                                });
                            });
                            //我的 办理节点
                            iDo.forEach(function (e) {
                                if (e != null) {
                                    const highLineEle = elementRegistry.get(e)
                                    modeling.setColor(highLineEle, {
                                        stroke: '#FF0000',
                                        fill: 'rgba(224 ,102 ,255 ,0.8)',
                                    });
                                }
                            });
                        }
                    }
                })
            });
        });
    }

    openFromUrl('/process/leave.bpmn');
</script>
</body>
</html>
